<template>
  <section >
    <el-tabs tab-position="left" v-model="tabPaneName" v-if="currAdPosition">
      <el-tab-pane label="广告内容" style="border:0px solid red;background-color: #eee;padding: 10px" name="detail">
        <el-row v-if="tabPaneName === 'detail'">
          <el-row v-if="pageType === 'ppts'">
            <ppt-ad :lightBoxId="currAdPosition.id"  />
          </el-row>
          <el-row v-else-if="pageType === 'tabs'">
            <new-tab :lightBoxId="currAdPosition.id"></new-tab>
            <!--<tab-ad :lightBoxId="currAdPosition.id"  />-->
          </el-row>
          <el-row v-else-if="pageType === 'image'">
            <image-ad :lightBoxId="currAdPosition.id" />
          </el-row>
          <el-row v-else-if="pageType === 'images'" style="background-color: #fff;padding: 20px">
            <images-ad :lightBoxId="currAdPosition.id"  />
          </el-row>
          <el-row v-else-if="pageType === 'featured'" style="background-color: #fff;padding: 20px">
            <featured-ad :lightBoxId="currAdPosition.id"  />
          </el-row>
          <el-row v-else-if="pageType === 'primary_images'" style="background-color: #fff;padding: 20px">
            <primary-images :lightBoxId="currAdPosition.id"  />
          </el-row>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="基础样式" name="layout">
        <base-set :adPosition="currAdPosition" v-if="tabPaneName === 'layout'" v-on:savePosition="savePositionEvent"></base-set>
      </el-tab-pane>
    </el-tabs>

    <!--<el-dialog :visible.sync="newAdDialog" v-if="currAd" title="设置">-->
      <!--<new-ad :ad="currAd" v-on:save="newAdEvent" v-on:updateEnd="updateEnd"></new-ad>-->
    <!--</el-dialog>-->
  </section>
</template>

<script>
  import newTab from './newTabAd'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import pptAd from './pptAd'
  import tabAd from './tabAd'
  import imageAd from './imageAd'
  import imagesAd from './imagesAd'
  import featuredAd from './featuredAd'
  import baseSet from '../adBaseSet'
  import primaryImages from './primaryImagesAd'
  import newAd from '../appAd/newAd'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "index",
    components:{pptAd,tabAd,imageAd,imagesAd,featuredAd,baseSet,primaryImages,newAd,newTab},
    props:['adPosition'],
    data(){
      return {
        pageType:null,
        currAdPosition:null,
        tabPaneName:'detail',
        newAdDialog:false,
        currAd:null
      }
    },
    watch:{
      adPosition(nv,ov){
        if(nv) this.init(nv)
      }
    },
    created(){
      this.init(this.adPosition)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(adPosition){
        console.log('当前广告位————————',adPosition)
        this.pageType=adPosition.adType.code
        this.currAdPosition=adPosition
      },
      newAdBtn(e){
        if(e){
          this.currAd=e
        }else {
          this.currAd={contentType:null,contentValue:null,departmentId:'空',img:null,data:{}}
        }
        console.log('不能空？？？',this.currAd)
        this.newAdDialog=true
      },
      editAdBtn(e){
        console.log('需要编辑了————————',e)
        this.currAd={contentType:e.data.contentType,contentValue:e.data.contentValue,...e}
        console.log('当前ad-----',this.currAd)
        this.newAdDialog=true
      },
      newAdEvent(e){
        let tmp={...e}
        tmp.start=''+dateFormater.formatDatetime(e.start)
        tmp.end=''+dateFormater.formatDatetime(e.end)
        console.log('看下参数————————',tmp)
        // return
        if(e.id){
          //保存
          this.updateAd(tmp)
        }else {
          //新建
          this.createAd(tmp)
        }
        //调用api新建一个ad，插入currAdPosition.ad里
      },
      updateEnd(e){
        console.log('修改时间的-----',e)
        e.end=''+dateFormater.formatDatetime(e.end)
        this.delayAd(e)
      },
      delayAd(data){
        this.fetch({name:"delayAd",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'保存成功！'})
            this.newAdDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      savePositionEvent(e){
        this.$emit('save',e)
      }
    }
  }
</script>

<style scoped>

</style>
